<template>
  <div class="wallpaper-list">

    <img v-for="item in listData" :key="item.id" :src="item.imageUrl" alt="">

    <!-- 分页 -->
    <el-row type="flex" justify="center">

      <!-- current-change 事件是当前页码变动时候触发的事件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-size="page.size"
        :total="page.total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        prev-text=" 上一页 "
        next-text=" 下一页 "
      >
      </el-pagination>
    </el-row>
  </div>
</template>
<script>

import {dateFormat} from '@/utils/date'

export default {
  props: {
    listData: { // 列表数据
      type: Array,
      default: () => {
        return [
          {
            id: 33,
            userId: 1,
            nickName: '豆子前端',
            title: '李敏',
            imageUrl: 'http://qinniu.douziqianduan.icu/wallpaper05.jpg-250x150',
            updateDate: '1984-08-23 07:48:04'
          },
          {
            id: 34,
            userId: 1,
            nickName: '豆子前端',
            title: '武芳',
            imageUrl: 'http://qinniu.douziqianduan.icu/wallpaper15.jpg-250x150',
            updateDate: '2009-07-04 01:31:46'
          }

        ]
      }
    },
    page: { // 分页对象
      type: Object,
      default: () => {
        return {
          size: 20,
          total: 1,
          current: 1
        }
      }
    }
  },

  methods: {
    handleSizeChange(size){
      // 触发父组件事件查询数据(父组件事件名，标签页名称, 当前页码)
      this.$emit('fetch-data', 1)
    },

    // 当页码改变后,被触发 , current 是最新的当前页码
    handleCurrentChange(current) {
      // 触发父组件事件查询数据(父组件事件名，标签页名称, 当前页码)
      this.$emit('fetch-data',  current)
    },

    // 格式化日期
    getDateFormat(date) {
      return dateFormat(date)
    }

  }

}
</script>

<style>
  .wallpaper-list{
    padding: 20px 40px;
    background-color: rgba(0,0,0, 0.5);
    display: flex;
  }



</style>
